<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数字合约--期权交易</title>
    <!-- Bootstrap -->
    <link href="public/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="public/css/common.css" rel="stylesheet"><!--公共样式-->
    <link href="public/css/Contract_transaction.css" rel="stylesheet"><!--合约交易样式-->
    <link href="public/css/Option_transaction.css" rel="stylesheet"><!--期权交易样式-->
    <link href="public/css/public_fenye.css" rel="stylesheet"><!--分页样式-->
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="public/js/html5shiv.min.js"></script>
    <script src="public/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!-- 头部 -->
<nav class="navbar navbar-default navbar-fixed-top head">
    <div class="container">
        <div class="container-fluid">
            <!-- logo -->
            <div class="navbar-header logo">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="public/image/logo_name.png" height="36px"></a>
            </div>

            <!-- 菜单 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">主页</a></li>
                    <li class="active"><a href="#">合约交易</a></li>
                    <li><a href="#">期权交易</a></li>
                    <li><a href="#">智能跟单</a></li>
                    <li><a href="#">资讯</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
                <!--  二级菜单-->
                <ul class="nav navbar-nav navbar-right head_right">
                    <li class="dropdown">
                        <!--  <button type="button" class="btn btn-default navbar-btn">登录</button>
                          <button type="button" class="btn btn-default navbar-btn">注册</button>-->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <img class="head_img" src="public/image/head.png">
                            <span>数字合约</span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</nav>

<!--主体-->
<div class="centent_center">
    <div class="container">
        <!--左侧-->
        <div class="transaction_left">
            <!--  交易品种-->
            <div class="Trading_variety table-responsive">
                <table class="table">
                    <tr>
                        <th>交易品种</th>
                        <th>价格</th>
                        <th>涨跌幅</th>
                    </tr>
                    <tr>
                        <td class="">trx/btx</td>
                        <td class="">0.000632/$3.4558</td>
                        <td class="rise">2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btxtr</td>
                        <td class="">0.0770/$3.4555</td>
                        <td class="fall">-2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btxtr</td>
                        <td class="">0.0770/$3.4555</td>
                        <td class="fall">-2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btxtr</td>
                        <td class="">0.0770/$3.4555</td>
                        <td class="fall">-2.45%</td>
                    </tr>

                    <tr>
                        <td class="">trx/btxtr</td>
                        <td class="">0.0770/$3.4555</td>
                        <td class="fall">-2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btx</td>
                        <td class="">0.000632/$3.4558</td>
                        <td class="rise">2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btxtr</td>
                        <td class="">0.0770/$3.4555</td>
                        <td class="fall">-2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btxtr</td>
                        <td class="">0.0770/$3.4555</td>
                        <td class="fall">-2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btx</td>
                        <td class="">0.000632/$3.4558</td>
                        <td class="rise">2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btxtr</td>
                        <td class="">0.0770/$3.4555</td>
                        <td class="fall">-2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btx</td>
                        <td class="">0.000632/$3.4558</td>
                        <td class="rise">2.45%</td>
                    </tr>
                    <tr>
                        <td class="">trx/btx</td>
                        <td class="">0.000632/$3.4558</td>
                        <td class="rise">2.45%</td>
                    </tr>


                </table>
            </div>

            <div class="row screen">
                <div class="col-xs-4 col-sm-4 col-md-4 screen_left">
                    <p>商品</p>
                    <p>委托周期</p>
                </div>
                <div class="col-xs-8 col-sm-8 col-md-8 screen_right">
                    <p><input type="text" /></p>
                    <p>
                        <select>
                            <option>2</option>
                        </select>
                    </p>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 screen_bottom">
                    <button type="button" class="btn btn-success">看涨</button>
                    <button type="button" class="btn btn-danger">看跌</button>
                </div>
            </div>

        </div>

        <!--右侧-->
        <div class="transaction_right">
            <div class="Chart">
                <!--  k线信息-->
                <div class="Chart_info">
                    <div class="row Chart_info_top">
                        <div class="col-xs-6 col-sm-6 col-md-3 Chart_info_list">
                            <p class="currency_name">
                                BTC/ETH <span>介绍</span>
                            </p>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-3 Chart_info_list">
                            <div class="">
                                <p class="">最新价</p>
                                <p class=""><span>13.23434</span>~$43.247</p>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-2 Chart_info_list">
                            <div class="">
                                <p class="">24H涨跌</p>
                                <p class=""><span>0.29%</span></p>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-2 Chart_info_list">
                            <div class="">
                                <p class="">24H最高价</p>
                                <p class="">534~$43.247</p>
                            </div>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-2 Chart_info_list">
                            <div class="">
                                <p class="">24H最高价</p>
                                <p class="">53.247 BTC</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- k线图-->
                <div id="">

                </div>
            </div>

        </div>

        <!-- 列表-->
        <div class="">
            <table class="table option_table">
                <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>商品</th>
                        <th>类型</th>
                        <th>委托周期</th>
                        <th>下单价格</th>
                        <th>到期时间</th>
                        <th>到期价格</th>
                        <th>盈亏</th>
                    </tr>
                </thead>
                <tbody>
                <tr>
                    <td>Tanmay</td>
                    <td>btc/etv</td>
                    <td>买跌</td>
                    <td>5分钟</td>
                    <td>451565</td>
                    <td>2018/4/4</td>
                    <td>45126</td>
                    <td>+145235</td>
                </tr>
                <tr>
                    <td>Tanmay</td>
                    <td>btc/etv</td>
                    <td>买跌</td>
                    <td>5分钟</td>
                    <td>451565</td>
                    <td>2018/4/4</td>
                    <td>45126</td>
                    <td>+145235</td>
                </tr>
                <tr>
                    <td>Tanmay</td>
                    <td>btc/etv</td>
                    <td>买跌</td>
                    <td>5分钟</td>
                    <td>451565</td>
                    <td>2018/4/4</td>
                    <td>45126</td>
                    <td>+145235</td>
                </tr>
                </tbody>
            </table>

            <!-- 分页-->
            <div class="fenye">
                <nav aria-label="Page navigation" class="page_box" >
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">上一页</span>
                            </a>
                        </li>
                        <li><a href="#" class="paging_active">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">下一页</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>
</div>

<!-- 尾部-->
<div class="footer" style="position: inherit">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-6">
                <p class="title">UITOUS</p>
                <p>UITOUS是一个提供区块链场外交易和币币交易平台，我们致力于让区块链更有效的流动，让更多人可以参与到区块链行业中来</p>
            </div>
            <div class="col-md-3 col-md-3">
                <ul>
                    <li class="title"><a href="">客服服务</a></li>
                    <li><a href="">帮助中心</a></li>
                    <li><a href="">客服端下载</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-md-3">
                <ul>
                    <li class="title"><a href="">关于我们</a></li>
                    <li><a href="">公司介绍</a></li>
                    <li><a href="">联系我们</a></li>
                </ul>
            </div>
            <div class="col-md-12 col-md-12">Copyright 2017-1018 BIHUE.COM Rights Reserved</div>
        </div>
    </div>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="public/js/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="public/bootstrap/js/bootstrap.min.js"></script>
<script src="public/js/InputSpinner.js"></script>
<script src="public/js/Contract_transaction.js"></script>
<script type="text/javascript">
    /*止盈止损*/
    $("input[type='number']").InputSpinner()
    $("input.small").InputSpinner({groupClass: "input-group-sm"})
    $("input.large").InputSpinner({groupClass: "input-group-lg"})
</script>
</body>
</html>